<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="zTree/css/demo.css">
    <link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="zTree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="zTree//js/jquery.ztree.exedit.js"></script>
    <link rel="stylesheet" href="semantic/semantic.min.css"/>
    <script src="semantic/semantic.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="layer/layer.js"></script>
    <title>导航页</title>
</head>
<body>
<div class="ui two column doubling stackable grid container">
    <div class="column" style="background-color: #AEDD81">
        <div class="ui container">
            <fieldset
                    style="width: 540px; height: 1050px; border: 1px solid; margin-top: 10px; border-color: #74B2E2; border-radius: 6px 6px 6px 6px">
                <legend
                        style="color: #2779AA; width: 30%; border-bottom: 0px; margin-left: 12px;">
                    <b>导航信息</b>
                </legend>
                <div class="zTreeDemoBackground left" style="margin-left: 10px">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </fieldset>
        </div>

        <div class="ui container" style="margin-top: 50px"></div>

    </div>
    <div class="column" style="background-color: #FC9D99; height: 1000px">
        <p>导航工具栏</p>
        <div class="ui clearing segment">
            <form id="filterForm" class="ui form" method="get">
                <div class="fields">
                    <div class="field">
                        <label>关键字：</label> <input type="text" id="name" name="name"
                                                   placeholder="" style='width: 150px;' oninput="searchNode()"/>
						<label style="margin-top: 2%">快速跳转：<input id="isFast" name="isFast" type="checkbox" value="" checked="checked"/></label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var setting = {
        view: {
            fontCss: getFontCss
        },
        check: {
            enable: false
        },
        edit: {
            enable: false,
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeMouseDown: beforeMouseDown
        }
    };
    $(function () {
        var zNodes;
        $.ajax({
            url: "url/list",
            type: "POST",
            cache: false,
            success: function (data) {
                var objs = jQuery.parseJSON(data);
                zNodes = objs;
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            },
            error: function () {
                alert("error");
            }
        });
    })

    var nodeList = [];
    var nodeParent = [];
    var nodeParentOld = [];
    var i = 0

    function searchNode() {
        deal();
    }

    var zTree;

    function deal() {
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //去除父节点高亮和子节点高亮
        updateNodes(false)
        updateParentNodes(false)
        nodeParent = [];
        var value = $("#name").val();
        if (value == "") {
            nodeList = [];
        } else {
            nodeList = zTree.getNodesByParamFuzzy("name", value);
        }

        if (nodeList.length != 0) {
            findParent(nodeList)
            //高亮父节点和子节点
            updateParentNodes(true)
            updateNodes(true);
        }
        // nodeParentOld 需要折叠，nodeParent 需要展开,如果nodeParentOld中有nodeParent里面的值则不折叠
        for (var i = 0, l = nodeParentOld.length; i < l; i++) {
            var flag = true;
            for (var j = 0, m = nodeParent.length; j < m; j++) {
                if (nodeParent[j] == nodeParentOld[i]) {
                    flag = false;
                    continue;
                }
            }
            if (flag) {
                //折叠
                node = zTree.getNodesByParam("id", nodeParentOld[i]);
                zTree.expandNode(node[0], false, null, null, null);
            }
        }

        for (var i = 0, n = nodeParent.length; i < n; i++) {
            //展开
            node = zTree.getNodesByParam("id", nodeParent[i]);
            zTree.expandNode(node[0], true, null, null, null);
        }
        //将nodeParent 赋值给 nodeParentOld 代表下一次需要折叠的
        nodeParentOld = nodeParent;
        if (nodeList.length == 1 && $("#isFast").is(':checked')) {
            if (nodeList[0].url != null
                && nodeList[0].url != "") {
                var id = nodeList[0].id;
                $.ajax({
                    type: "GET",
                    url: "url/click",
                    cache: false,
                    data: {id},
                });
                //直接跳转
                window.open(nodeList[0].url)
            }
        }
    }

    //找到所有父节点
    function findParent(nodeList) {
        nodeNewList = [];
        for (var i = 0, l = nodeList.length; i < l; i++) {
            var pId = nodeList[i].pId;
            if (pId == null) {
                return;
            }
            //如果已经存在则不再插入
            var flag = true;
            for (var j = 0, z = nodeParent.length; j < z; j++) {
                if (nodeParent[j] == pId) {
                    flag = false
                    continue;
                }
            }
            if (flag) {
                nodeParent.push(pId);
                nodeNewList = zTree.getNodesByParam("id", parseInt(pId));
                findParent(nodeNewList);
            }
        }
    }

    function updateParentNodes(highlight) {
        var node = [];
        //s里面记录的父节点全部高亮
        for (var i = 0, l = nodeParent.length; i < l; i++) {
            node = zTree.getNodesByParam("id", nodeParent[i]);
            node[0].highlight = highlight;
            zTree.updateNode(node[0]);
        }
    }


    function updateNodes(highlight) {
        for (var i = 0, l = nodeList.length; i < l; i++) {
            nodeList[i].highlight = highlight;
            zTree.updateNode(nodeList[i]);
        }
    }

    function getFontCss(treeId, treeNode) {
        return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    }

    function beforeMouseDown(treeId, treeNode) {
        if (treeNode.url == null || treeNode.url == '') {
            //将此节点展开
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            node = zTree.getNodesByParam("id", treeNode.id);
            zTree.expandNode(node[0], true, null, null, null);
            return;
        }
        var id = treeNode.id;
        $.ajax({
            type: "GET",
            url: "url/click",
            cache: false,
            data: {id},
        });
    }

</script>
</html>